<template>
	<view class="profile-container">

		
		<!-- 顶部用户信息卡片 -->
		<view class="user-info-card">
			<view class="user-background">
				<image src="/static/images/lvpai/shouyebg.png" mode="aspectFill" class="bg-image"></image>
				<view class="bg-overlay"></view>
			</view>
			
			<view class="user-content">
				<!-- 头像和基本信息 -->
				<view class="user-header">
					<view class="avatar-container" @click="changeAvatar">
						<image :src="userInfo.avatar" mode="aspectFill" class="user-avatar"></image>
						<view class="avatar-edit-icon">
							<text class="edit-text">编辑</text>
						</view>
					</view>
					<view class="user-basic-info">
						<text class="username">{{ userInfo.nickname }}</text>
						<text class="user-id">ID: {{ userInfo.userId }}</text>
						<view class="vip-badge" v-if="userInfo.isVip">
							<text class="vip-text">VIP</text>
						</view>
					</view>
				</view>
				
				<!-- 积分余额信息 -->
				<view class="balance-info">
					<view class="balance-item">
						<text class="balance-value">{{ userInfo.credits }}</text>
						<text class="balance-label">剩余积分</text>
					</view>
					<view class="balance-divider"></view>
					<view class="balance-item">
						<text class="balance-value">{{ userInfo.photoCount }}</text>
						<text class="balance-label">生成照片</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 充值中心入口 -->
		<view class="recharge-section">
			<view class="recharge-card" @click="goToRecharge">
				<view class="recharge-icon">
					<text class="icon-recharge">💎</text>
				</view>
				<view class="recharge-content">
					<text class="recharge-title">充值中心</text>
					<text class="recharge-desc">购买积分，畅享AI拍照</text>
				</view>
				<view class="recharge-arrow">
					<text class="arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<!-- 我的相册 -->
			<view class="menu-group">
				<text class="group-title">我的作品</text>
				<view class="menu-item" @click="goToAlbum">
					<view class="menu-icon album-icon">
						<text class="icon">📷</text>
					</view>
					<view class="menu-content">
						<text class="menu-title">我的相册</text>
						<text class="menu-desc">查看我生成的所有照片</text>
					</view>
					<view class="menu-badge" v-if="albumCount > 0">
						<text class="badge-text">{{ albumCount }}</text>
					</view>
					<view class="menu-arrow">
						<text class="arrow">></text>
					</view>
				</view>
			</view>
			
			<!-- 收藏功能 -->
			<view class="menu-group">
				<text class="group-title">个人收藏</text>
				<view class="menu-item" @click="goToFavorites">
					<view class="menu-icon favorite-icon">
						<text class="icon">❤️</text>
					</view>
					<view class="menu-content">
						<text class="menu-title">我的收藏</text>
						<text class="menu-desc">收藏的照片和模板</text>
					</view>
					<view class="menu-badge" v-if="favoriteCount > 0">
						<text class="badge-text">{{ favoriteCount }}</text>
					</view>
					<view class="menu-arrow">
						<text class="arrow">></text>
					</view>
				</view>
				
				<view class="menu-item" @click="goToHistory">
					<view class="menu-icon history-icon">
						<text class="icon">📝</text>
					</view>
					<view class="menu-content">
						<text class="menu-title">使用记录</text>
						<text class="menu-desc">查看历史生成记录</text>
					</view>
					<view class="menu-arrow">
						<text class="arrow">></text>
					</view>
				</view>
			</view>
			
			<!-- 其他功能 -->
			<view class="menu-group">
				<text class="group-title">更多功能</text>
				<view class="menu-item" @click="goToSettings">
					<view class="menu-icon settings-icon">
						<text class="icon">⚙️</text>
					</view>
					<view class="menu-content">
						<text class="menu-title">设置</text>
						<text class="menu-desc">个人设置和偏好</text>
					</view>
					<view class="menu-arrow">
						<text class="arrow">></text>
					</view>
				</view>
				
				<view class="menu-item" @click="goToHelp">
					<view class="menu-icon help-icon">
						<text class="icon">❓</text>
					</view>
					<view class="menu-content">
						<text class="menu-title">帮助中心</text>
						<text class="menu-desc">使用指南和常见问题</text>
					</view>
					<view class="menu-arrow">
						<text class="arrow">></text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部空白，避免被tabbar遮挡 -->
		<view class="bottom-space"></view>
		
		<!-- 椭圆形导航栏 -->
		<EllipseTabBar />
	</view>
</template>

<script>
import EllipseTabBar from '@/components/EllipseTabBar.vue'

export default {
	components: {
		EllipseTabBar
	},
	data() {
		return {
			userInfo: {
				avatar: '/static/images/doubao_icon/default_avatar.png',
				nickname: '旅拍达人',
				userId: '168888',
				isVip: true,
				credits: 128,
				photoCount: 45
			},
			albumCount: 23,
			favoriteCount: 12
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		
		// 加载用户信息
		this.loadUserInfo();
		
		console.log('个人中心页面加载完成');
	},
	
	onShow() {
		console.log('个人中心页面显示');
	},
	methods: {
		loadUserInfo() {
			// 这里可以调用API获取用户信息
			// 暂时使用模拟数据
		},
		
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.userInfo.avatar = res.tempFilePaths[0];
					uni.showToast({
						title: '头像更新成功',
						icon: 'success'
					});
				}
			});
		},
		
		goToRecharge() {
			uni.navigateTo({
				url: '/pages/recharge/index'
			});
		},
		
		goToAlbum() {
			uni.navigateTo({
				url: '/pages/my_photo/index'
			});
		},
		
		goToFavorites() {
			uni.showToast({
				title: '我的收藏',
				icon: 'none'
			});
			// uni.navigateTo({
			//     url: '/pages/favorites/index'
			// });
		},
		
		goToHistory() {
			uni.showToast({
				title: '使用记录',
				icon: 'none'
			});
			// uni.navigateTo({
			//     url: '/pages/history/index'
			// });
		},
		
		goToSettings() {
			uni.showToast({
				title: '设置',
				icon: 'none'
			});
			// uni.navigateTo({
			//     url: '/pages/settings/index'
			// });
		},
		
		goToHelp() {
			uni.showToast({
				title: '帮助中心',
				icon: 'none'
			});
			// uni.navigateTo({
			//     url: '/pages/help/index'
			// });
		}
	}
}
</script>

<style scoped>
.profile-container {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(180deg, #f0f8ff 0%, #e6f3f7 50%, #fff5f0 100%);
}



/* 用户信息卡片 */
.user-info-card {
	position: relative;
	margin: 40rpx 30rpx;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.2);
}

.user-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.bg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(74, 144, 226, 0.85) 0%, rgba(86, 200, 216, 0.75) 50%, rgba(255, 154, 133, 0.65) 100%);
}

.user-content {
	position: relative;
	z-index: 2;
	padding: 40rpx 30rpx;
}

.user-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.avatar-container {
	position: relative;
	margin-right: 30rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.8);
	object-fit: cover;
}

.avatar-edit-icon {
	position: absolute;
	bottom: -5rpx;
	right: -5rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.edit-text {
	font-size: 18rpx;
	color: #666;
	font-weight: 500;
}

.user-basic-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 44rpx;
	font-weight: 600;
	color: white;
	margin-bottom: 8rpx;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.user-id {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 12rpx;
}

.vip-badge {
	width: fit-content;
	background: linear-gradient(135deg, #ff9a85 0%, #ffd180 100%);
	color: white;
	font-size: 20rpx;
	font-weight: 600;
	padding: 6rpx 16rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(255, 154, 133, 0.4);
}

.vip-text {
	letter-spacing: 1rpx;
}

.balance-info {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	border-radius: 16rpx;
	padding: 24rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.balance-item {
	text-align: center;
	flex: 1;
}

.balance-value {
	display: block;
	font-size: 48rpx;
	font-weight: 700;
	color: white;
	margin-bottom: 8rpx;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.balance-label {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.balance-divider {
	width: 2rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.3);
	margin: 0 20rpx;
}

/* 充值中心 */
.recharge-section {
	margin: 0 30rpx 40rpx;
}

.recharge-card {
	background: linear-gradient(135deg, #5dade2 0%, #58d68d 100%);
	border-radius: 20rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 8rpx 32rpx rgba(93, 173, 226, 0.25);
	transition: all 0.3s ease;
}

.recharge-card:active {
	transform: translateY(2rpx) scale(0.98);
}

.recharge-icon {
	width: 80rpx;
	height: 80rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.icon-recharge {
	font-size: 36rpx;
}

.recharge-content {
	flex: 1;
}

.recharge-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: white;
	margin-bottom: 6rpx;
}

.recharge-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.recharge-arrow {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arrow {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

/* 菜单区域 */
.menu-section {
	margin: 0 30rpx;
}

.menu-group {
	margin-bottom: 40rpx;
}

.group-title {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	color: #666;
	margin-bottom: 20rpx;
	padding-left: 8rpx;
}

.menu-item {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.menu-item:active {
	transform: translateY(1rpx) scale(0.98);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}

.menu-item:last-child {
	margin-bottom: 0;
}

.menu-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
}

.album-icon {
	background: linear-gradient(135deg, #ff9a85 0%, #ffa07a 100%);
}

.favorite-icon {
	background: linear-gradient(135deg, #ff6b6b 0%, #ff9a85 100%);
}

.history-icon {
	background: linear-gradient(135deg, #4a90e2 0%, #56c8d8 100%);
}

.settings-icon {
	background: linear-gradient(135deg, #78909c 0%, #90a4ae 100%);
}

.help-icon {
	background: linear-gradient(135deg, #58d68d 0%, #7dd3fc 100%);
}

.icon {
	font-size: 36rpx;
}

.menu-content {
	flex: 1;
}

.menu-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 6rpx;
}

.menu-desc {
	font-size: 24rpx;
	color: #999;
}

.menu-badge {
	background: linear-gradient(135deg, #ff9a85 0%, #ff6b6b 100%);
	color: white;
	font-size: 20rpx;
	font-weight: 600;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	margin-right: 16rpx;
	min-width: 32rpx;
	text-align: center;
	box-shadow: 0 2rpx 8rpx rgba(255, 154, 133, 0.3);
}

.badge-text {
	font-size: 20rpx;
}

.menu-arrow {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottom-space {
	height: 120rpx;
}

/* 移动端适配 */
@media screen and (max-width: 375px) {
	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}
	
	.username {
		font-size: 40rpx;
	}
	
	.balance-value {
		font-size: 42rpx;
	}
}
</style>